TreeMap একটি ভিজ্যুয়াল টুল যা হায়ারার্কিকাল ডেটা উপস্থাপন করতে ব্যবহৃত হয়। এটি ডেটাকে আয়তাকার সেলগুলিতে বিভক্ত করে, যেখানে প্রতিটি সেলটি একটি নোড বা ডেটা পয়েন্টের প্রতিনিধিত্ব করে। বড় সেলগুলি বেশি গুরুত্বপূর্ণ বা বড় মানের ডেটা দেখায়, এবং ছোট সেলগুলি কম গুরুত্বপূর্ণ বা ছোট মানের ডেটা দেখায়। TreeMap ব্যবহার করে আপনি সহজেই ডেটার মধ্যে সম্পর্ক এবং হায়ারার্কি বিশ্লেষণ করতে পারেন।
গুগল চার্টে TreeMap চার্টটি খুবই শক্তিশালী একটি টুল, যা বড় ডেটাসেটের হায়ারার্কি এবং সম্পর্ক দেখানোর জন্য ব্যবহৃত হয়।
TreeMap কীভাবে কাজ করে?
TreeMap চার্টটি একটি গাছের মতো ডেটা শাখার মধ্যে সম্পর্ক তৈরি করে। প্রতিটি শাখার নিচে আরও ছোট ছোট শাখা থাকতে পারে এবং প্রতিটি শাখার আকার বা রঙ ডেটার মান বা অন্যান্য বৈশিষ্ট্য অনুযায়ী পরিবর্তিত হয়।
TreeMap সাধারণত নিম্নলিখিত ডেটা প্রকাশ করতে ব্যবহৃত হয়:
- ব্যবসায়িক ডেটার শ্রেণীবিভাগ (যেমন: কোম্পানি, বিভাগ, পণ্য ইত্যাদি)
- বিভিন্ন বিভাগের মধ্যে আয় বা লাভের তুলনা
- কোনো ডেটা হায়ারার্কির ভিতরে প্রতিটি স্তরের পরিসংখ্যান
Google Charts-এ TreeMap তৈরি করার উদাহরণ
নিচে একটি TreeMap চার্ট তৈরি করার উদাহরণ দেওয়া হলো, যা একটি কোম্পানির বিভিন্ন বিভাগের ডেটা দেখাবে:
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TreeMap Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('string', 'Parent');
data.addColumn('number', 'Value');
data.addColumn('string', 'Color');
data.addRows([
['Root', null, 0, null],
['Electronics', 'Root', 0, 'green'],
['Mobile', 'Electronics', 15, 'lightgreen'],
['Laptops', 'Electronics', 25, 'green'],
['Appliances', 'Root', 0, 'blue'],
['Washing Machine', 'Appliances', 10, 'lightblue'],
['Refrigerator', 'Appliances', 20, 'blue'],
['Furniture', 'Root', 0, 'orange'],
['Sofa', 'Furniture', 5, 'yellow'],
['Table', 'Furniture', 10, 'orange']
]);
var options = {
minColor: '#FF0000',
midColor: '#FFFF00',
maxColor: '#00FF00',
headerHeight: 15,
fontColor: 'black',
fontSize: 14,
showScale: true
};
var chart = new google.visualization.TreeMap(document.getElementById('treemap_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>TreeMap Chart Example</h2>
<div id="treemap_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
- ডেটা তৈরি:
google.visualization.DataTable()দিয়ে একটি ডেটা টেবিল তৈরি করা হয়েছে। এখানে প্রথম কলামে বিভিন্ন ক্যাটেগরি (যেমন Electronics, Furniture, Appliances ইত্যাদি), দ্বিতীয় কলামে তাদের প্যারেন্ট ক্যাটেগরি (যেমন Root), তৃতীয় কলামে তাদের মান (Value) এবং চতুর্থ কলামে রঙ (Color) নির্ধারণ করা হয়েছে।
- শৈলী কাস্টমাইজেশন:
minColor,midColor, এবংmaxColorএর মাধ্যমে TreeMap এর রঙ কাস্টমাইজ করা হয়েছে। এখানে লাল, হলুদ, এবং সবুজ রং নির্ধারণ করা হয়েছে, যা ডেটার মানের উপর ভিত্তি করে রং পরিবর্তন করবে।headerHeight,fontColor, এবংfontSizeদিয়ে চার্টের শিরোনামের শৈলী এবং ফন্ট কাস্টমাইজ করা হয়েছে।showScaleঅপশনটি সেট করা হয়েছে, যাতে রঙের স্কেল প্রদর্শিত হয়।
- TreeMap তৈরি:
google.visualization.TreeMapফাংশনটি ব্যবহার করেtreemap_divID সহ একটিdivএলিমেন্টে TreeMap চার্টটি তৈরি এবং প্রদর্শন করা হয়েছে।
TreeMap এর উপকারিতা
- হায়ারার্কিকাল ডেটা ভিজ্যুয়ালাইজেশন: এটি ডেটার মধ্যে সম্পর্ক এবং হায়ারার্কি বুঝতে সাহায্য করে।
- ডেটা বিশ্লেষণ: ব্যবহারকারীরা সহজেই বড় ডেটাসেটের মধ্যে সম্পর্ক এবং প্রবণতা বিশ্লেষণ করতে পারে।
- বিভাগগুলির তুলনা: এটি বিভিন্ন বিভাগ বা শ্রেণীর মধ্যে তুলনা করতে কার্যকর।
- স্পেস ব্যবহার: TreeMap কম জায়গায় অধিক ডেটা প্রদর্শন করে, যা এটি স্কেলেবেল এবং স্পেস-এফফিশিয়েন্ট করে তোলে।
উপসংহার
Google Charts এর TreeMap একটি শক্তিশালী টুল, যা ডেটার হায়ারার্কি এবং সম্পর্ক বিশ্লেষণ করতে সাহায্য করে। এটি ভিজ্যুয়ালভাবে বড় ডেটাসেটের মধ্যে বিভিন্ন বিভাগ এবং তাদের অংশের তুলনা করতে সহায়ক, যা সহজে ব্যবহারকারীকে সিদ্ধান্ত নিতে সাহায্য করে। এই চার্টটি আপনার ডেটাকে সহজ এবং আকর্ষণীয়ভাবে উপস্থাপন করতে পারে।
Read more
